<template>
  <div class="home">
    <van-search
      @click="handleClickSearch"
      disabled
      shape="round"
      background="#cccccc"
      v-model="SearchValue"
      placeholder="请输入搜索关键词"
    />
    <van-swipe :autoplay="3000">
      <van-swipe-item v-for="(item, index) in banner" :key="index">
        <img :src="item.image_url" :title="item.name" alt="" width="100%" :style="{display:'block'}"/>
      </van-swipe-item>
    </van-swipe>

    <!-- Vant 内置动画样式 name="van-slide-right" 即可 -->
    <transition name="van-fade">
      <div class="popup-shadow" v-show="$store.state.isShowPopupShadow"></div>
    </transition>
    <transition name="slideSearch">
      <!-- 要给子路由一个路由出口 -->
      <router-view></router-view>
    </transition>
  </div>
</template>

<script>
import { GetHomeList } from '@/utils/api.js'
export default {
  name: 'Home',
  data () {
    return {
      SearchValue: '',
      banner: []
    }
  },
  components: {},
  created () {
    // 由于 request 已经定义了 baseURL 所以只需要写后面的 url
    GetHomeList()
      .then(response => {
        // console.log(response)
        this.banner = response.data.banner
      })
      .catch(error => {
        console.log(error)
      })
  },
  methods: {
    handleClickSearch () {
      // ? 路由跳转
      this.$router.push('/home/searchPopup')
      // ? 修改 Vuex 中的 isShowPopupShadow
      this.$store.commit('isShowPopupShadowChange', true)
    }
  }
}
</script>
<style scope lang="less">
/* vue 可以设置不同的进入和离开动画 */
/* 设置持续时间和动画函数 */
.slideSearch-enter, .slideSearch-leave-to{
  // 定义子路由进入过渡 开始生效 时的状态
  right: -100%;
}
.slideSearch-enter-active, .slideSearch-leave-active{
  // 定义子路由进入过渡生效时的 属性
  transition: all .35s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slideSearch-enter-to, .slideSearch-leave{
  // 定义子路由进入过渡 结束生效 时的状态
  right: 0;
}
.popup-shadow{
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, .5);
  // ? 将 SearchPopup 的 z-index 设置成 99
  z-index: 98;
}
</style>
